<template>
  <h1 ref="title">
    {{ msg }}
  </h1>
  <h2>{{ props.msg }} ==> 1</h2>
  <button
    type="button"
    @click="increment"
  >
    count is: {{ count }}
  </button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['increment'])
const count = ref(100)
const increment = () => {
  console.log(props.msg)
  count.value++
  emit('increment')
}
</script>

<!-- <script lang="ts">
import { ref, defineComponent, PropType, onMounted } from 'vue'
interface User {
  name: String,
  age: Number
}
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    },
    abc: {
      type: Number,
      required: true
    },
    obj: {
      type: Object as PropType<User>,
      default: () => {}
    }
  },
  setup (props) {
    // props.obj?.age
    const count = ref(0)
    const foo = ref<{
      a: String,
      b: Number
    } | null>(null)
    foo.value = {
      a: 'aa',
      b: 1
    }
    const title = ref<HTMLHeadElement | null>(null)

    onMounted(() => {
      console.log('title', title.value)
    })
    return {
      count,
      foo,
      title
    }
  }
})
</script> -->

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
